import React, { useEffect, useState, useRef, useCallback } from 'react';
import { type_list, type_deletelist, type_editlist, type_pagelist, } from '../../../../utils/Hospital Information/api'
import type { ColumnsType } from 'antd/es/table';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import { Input, Button, notification, Switch, TablePaginationConfig, Tag, Upload, DatePicker } from 'antd';
import { Form, Modal, Select } from 'antd';
import UserTable from '../MyUtils/UserTable';
import { useNavigate } from 'react-router-dom';

const { Search, } = Input;
interface Props {

}

interface DataType {
    type: string,
    number: string,
    describe: string,
    statu: boolean,
}
function Type(props: Props) {
    var [form] = Form.useForm();
    // 表单中的描述内容区域
    const { TextArea } = Input;
    // 用于路由跳转
    var navigate = useNavigate()
    // 获取医生列表
    var [formlist, setFormlist] = useState([])
    // 获取本行的id修改内容
    var [newid, setNewid] = useState('')

    //决定了每一列渲染什么数据
    const columns: ColumnsType<DataType> = [
        {
            title: '类型名称', //表格列的名字(显示在表格头上)
            dataIndex: 'type', //数据对应的属性名
            // key: 'id' //key是必须的,每一列不同.
        },
        {
            title: '套餐数量',
            dataIndex: 'number',
        },
        {
            title: '包含套餐',
            dataIndex: 'describe',
        },
        {
            title: '套餐状态',
            key: 'statu',
            dataIndex: 'statu',
            render: () => (
                <>
                    <Switch defaultChecked onChange={onChange} />
                </>
            ),
        },
        {
            title: '操作',
            // key: 'action',
            render: (_, record) => (
                <>
                    <div className="changebox">
                        <EditOutlined onClick={() => { toEdit(record,) }} />
                        <DeleteOutlined onClick={() => { toDel(record,) }} style={{ marginLeft: 20 }} />
                    </div>
                </>
            ),
        },
    ];

    useEffect(() => {
        type_list().then((res) => {
            setFormlist(res.data)
        })
    }, [])


    // 点击删除一行内容
    var toDel = (record: any) => {
        var id = record.id
        type_deletelist(id).then((res) => {
            type_list().then((res) => {
                setFormlist(res.data)
            })
            notification.success({ message: '删除成功！' });
        })
    }

    var [electeds, setElecteds] = useState([])
    // 复选框
    const elected = useCallback((elected: any) => {
        setElecteds(elected)
    }, [electeds])

    // 批量删除
    var toAllDel = () => {
        if (electeds) {
            electeds.map((item) => {
                type_deletelist(item).then((res) => {
                    type_list().then((res) => {
                        setFormlist(res.data)
                    })
                })
            }
            )
        }

    }


    //分页
    const page = (page: TablePaginationConfig) => {
        type_pagelist(page).then((res) => {
        })
    }


    // 编辑的时候
    const [isModalOpenedit, setIsModalOpenedit] = useState(false);

    const showModaledit = () => {
        setIsModalOpenedit(true);
    };
    const handleOkedit = () => {
        setIsModalOpenedit(false);
    };

    const handleCanceledit = () => {
        setIsModalOpenedit(false);
    };

    // 点击编辑
    const toEdit = (record: any) => {
        showModaledit();
        form.setFieldsValue(record)
        setNewid(record.id)
    }

    // 编辑表单提交
    const onFinishedit = (values: any) => {
        type_editlist(newid, {
            type: values.type,
            number: values.number,
            describe: values.describe,
            statu: true,
        }).then((res) => {
            type_list().then((res) => {
                setFormlist(res.data)
            })
            notification.success({ message: '修改成功！' });
        })
    }

    // 定义是否选中
    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };
    return (
        <div className='type'>
            {/* 套餐类型 */}
            <Modal title="编辑套餐类型" footer={[]} open={isModalOpenedit} onOk={handleOkedit} onCancel={handleCanceledit}>
                <Form
                    name="basic"
                    labelCol={{ span: 6 }}
                    wrapperCol={{ span: 18 }}
                    onFinish={onFinishedit}
                    form={form}
                >
                    <Form.Item label="类型名称" name="type">
                        <Input placeholder='请输入类型名称' />
                    </Form.Item>
                    <Form.Item label="套餐数量" name="number">
                        <Input placeholder='请输入套餐数量' />
                    </Form.Item>
                    <Form.Item label="包含套餐" name="describe">
                        <Input placeholder='请输入套餐' />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                        <Button style={{ marginLeft: 20 }} onClick={() => { handleCanceledit() }}>
                            取消
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
            <UserTable page={page} elected={elected} header={columns} formlist={formlist} />

        </div>
    );
}

export default Type;